<template>
	<view class="cate-two flex" style="height: 100%;">
		<view class="aside bg-body">
			<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
				<block v-for="(item, index) in cateList" :key="index">
					<view :class="'one-item sm ' + (index == selectIndex ? 'active' : '')" @click="changeActive(index)">
						<text class="name">{{ item.name }}</text>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="main bg-white">
			<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true"
				@scrolltolower="getGoodsListFun">
				<view class="main-wrap">
					<view v-if="appConfig.cate_style == 4">
						<view v-for="(sitem, sindex) in cateTwoList" :key="sindex" class="two-item bg-white">
							<view class="title flex row-between">
								<text v-if="sitem.children.length>0" class="name bold sm">{{sitem.name}}</text>
								<router-link v-else class="three-item"
									:to="'/pages/active_list/active_list?type=hot&title='+sitem.name+'&shopCateId='+sitem.id">
									<text class="name bold sm">{{sitem.name}}</text>
								</router-link>
<!-- 								<view class="optionBtn" @tap="toggleItem(sitem)"
									v-if="pxToRpx(sitem.height) > 230 && sitem.height !=216">
									<text class="text" v-show="sitem.close">展开</text><text class="text"
										v-show="!sitem.close">收起</text>
									<u-icon size="20" name="arrow-down"></u-icon>
								</view> -->
							</view>
							<view class="three-list" :class="{close: pxToRpx(sitem.height) > 230 && sitem.close }">
								<view class="three-list-wrap">
									<router-link class="three-item" v-for="(titem, tindex) in sitem.children"
										:key="tindex"
										:to="'/pages/active_list/active_list?type=hot&title='+titem.name+'&shopCateId='+titem.id">
										<view class="col-center flex">
											<view class="text">{{ titem.name }}</view>
											<!-- <image src="../../static/images/icon-cate-hot.png" class="iconHot"></image> -->
										</view>
									</router-link>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getListByLevelOne,
		getGoodsList
	} from '@/api/store'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		loadingType
	} from '@/utils/type.js'
	export default {
		name: "cate-two",
		props: {
			cateList: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				selectIndex: 0,
				cateTwoList: [],
				goodsList: [],
				sortConfig: {
					goodsType: 'double',
					priceSort: '',
					saleSort: '',
				},
				status: loadingType.LOADING,
				hasData: true
			};
		},
		methods: {
			getHeight() {
				const _this = this;
				const query = uni.createSelectorQuery().in(this)
				let NodesRef = query.selectAll(".three-list-wrap");
				NodesRef.boundingClientRect((array) => {
					array.forEach((item, i) => {
						console.log(item);
						console.log(i);
						_this.cateTwoList[i].height = item.height;
					})
				}).exec()
				console.log(this.cateTwoList);
			},
			// px转rpx
			pxToRpx(px) {
				const screenWidth = uni.getSystemInfoSync().screenWidth
				return (750 * Number.parseInt(px)) / screenWidth
			},
			toggleItem(item) {
				item.close = !item.close;
				console.log(item);
			},
			changeActive(index) {
				this.selectIndex = index
			},
			async getListByLevelOneFun() {
				const {
					selectIndex,
					cateList
				} = this
				if (!cateList.length) return
				const id = cateList[selectIndex].id
				const {
					code,
					data
				} = await getListByLevelOne({
					id
				})
				if (code == 1) {
					data.forEach((item, i) => {
						// item.height = 216;
						item.close = false;
					})
					this.cateTwoList = data;
					this.$nextTick(() => {
						this.getHeight()
					})
				}
			},
			getGoodsListFun() {
				let {
					page,
					cateList,
					status,
					selectIndex,
					goodsList,
					sortConfig: {
						priceSort,
						saleSort,
					}
				} = this;
				if (!cateList.length) return
				const id = cateList[selectIndex].id
				if (status == loadingType.FINISHED || this.appConfig.cate_style == 4) return;
				getGoodsList({
					page_no: page,
					platform_cate_id: id,
					sort_by_price: priceSort,
					sort_by_sales: saleSort,
				}).then(res => {
					if (res.code == 1) {
						let {
							more,
							lists,
						} = res.data;
						goodsList.push(...lists);
						this.page++;
						if (!more) {
							this.status = loadingType.FINISHED;
						}
						if (goodsList.length <= 0) {
							this.status = loadingType.EMPTY
							return;
						}
					} else {
						this.status = loadingType.ERROR
					}
				});
			},
			onRefresh() {
				this.status = loadingType.LOADING
				this.page = 1
				this.goodsList = []
				this.getGoodsListFun()
			},
		},


		watch: {
			selectIndex() {
				this.appConfig.cate_style == 1 ? this.onRefresh() : this.getListByLevelOneFun()
			},
			cateList: {
				immediate: true,
				handler(val) {
					this.hasData = val.length ? true : false
					this.appConfig.cate_style == 1 ? this.onRefresh() : this.getListByLevelOneFun()
				}
			},
			'sortConfig.saleSort'() {
				this.onRefresh()
			},
			'sortConfig.priceSort'() {
				this.onRefresh()
			}
		},
		computed: {
			...mapGetters(['appConfig']),
		}
	}
</script>

<style lang="scss" scoped>
	$ratio: 1080 / 750;
	$manTextColor: #32302f;

	@function toRpx($px) {
		@return $px / $ratio +rpx;
	}

	@mixin text() {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cate-two {
		border-top: toRpx(4) $-color-body solid;

		.aside {
			width: toRpx(300);
			flex: none;
			height: 100%;

			.one-item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: toRpx(120);
				color: $manTextColor;
				font-size: 27rpx;
				font-weight: 400;

				&.active {
					background-color: $-color-white;
					color: #db6350;
				}

				.active-line {
					position: absolute;
					width: 6rpx;
					height: 30rpx;
					left: 4rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.main {
			height: 100%;
			flex: 1;

			.main-wrap {
				position: relative;
				padding: toRpx(18) 0 toRpx(52) 0;

				// padding: 20rpx 20rpx 0;

				.two-item {
					// border-radius: 10rpx;
					padding: 0 toRpx(30);

					.title {
						height: toRpx(120);
						padding-top: toRpx(10);
						box-sizing: border-box;

						.name {
							font-size: 28rpx;
							color: $manTextColor;
							font-weight: 900;
							padding: 0 toRpx(12);
							width: toRpx(575);
							@include text();
						}

						.optionBtn {
							.text {
								font-size: 26rpx;
								margin-right: 3px;
							}
						}

						.line {
							width: 40rpx;
							height: 1px;
							background-color: #BBBBBB;
						}
					}

					.three-list {
						overflow: hidden;

						&.close {
							height: 222rpx;
						}

						.three-list-wrap {
							overflow: hidden;
						}

						.three-item {
							float: left;
							padding: 0 toRpx(30);
							height: toRpx(94);
							line-height: toRpx(94);
							text-align: center;
							border-radius: 3rpx;
							margin-right: 10rpx;
							margin-bottom: 10rpx;
							background-color: $-color-body;

							.iconHot {
								width: 38rpx;
								height: 30rpx;
								margin-left: 2px;
								position: relative;
								top: - toRpx(10);
							}

							.text {
								font-size: 27rpx;
								text-align: center;
							}
						}
					}

				}
			}

			.goods .item {
				border-radius: 14rpx;
			}
		}
	}
</style>